<script setup lang="ts">
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";

import RegisterPage from "./RegisterPage.vue";
import LoginPage from "./LoginPage.vue";

import { useModalStore } from "@/store/modal.js";
import { useUserStore } from "@/store/user.js";

const input = ref("");
const user = useUserStore();
const modal = useModalStore();
// console.log(localStorage.getItem('xdclass_user_is_login'))
</script>

<template>
<div class="flex items-center gap-2">
  <img
    class="h-16 w-36"
    src="https://front.cdn.xdclass.net/images/logo.webp"
    width="160"
  />
  <div class="flex items-center justify-between flex-[1]">
    <a href="#">首页</a>
    <a href="#">课程中心</a>
    <a href="#" class="flex items-center justify-center">
      <img
        src="https://front.cdn.xdclass.net/images/vip_icon.webp"
        class="w-5 h-5"
        width="50"
      />
      <span>超级会员</span>
    </a>
    <a href="#">工具</a>
    <a href="#">
      <span>自学路线</span>
      <el-icon>
        <ArrowDownBold />
      </el-icon>
    </a>
    <a href="#">
      <span>一对一辅导</span>
      <el-icon>
        <ArrowDownBold />
      </el-icon>
    </a>
    <a href="#">
      <el-input v-model="input" class="w-60" placeholder="请输入搜索内容">
        <template #append>
          <!-- <el-button :icon="Search" /> -->
          <el-icon>
            <Search />
          </el-icon>
        </template>
      </el-input>
    </a>
    <a href="#">兑换码</a>
    <a href="#">云服务器</a>
  </div>
</div>
<div v-show="!user.isLogin">
  <el-button link size="large" @click="modal.switchLoginVisible">登录</el-button>
  <el-button link size="large" @click="modal.switchRegVisible">注册</el-button>
</div>
<!-- <div v-else>
  <el-popconfirm title="是否退出登录？" @confirm="user.logout">
    <template #reference>
      <el-button>{{ user.users.account }}</el-button>
    </template>
  </el-popconfirm>
</div> -->
<RegisterPage />
<LoginPage />
<!-- <div v-show="user.isLogin">
  {{ user.users.account }}
</div> -->
</template>

<!-- HeaderPage.vue -->
<style scoped>
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.gap-2 {
  gap: 0.5rem;
}
.h-16 {
  height: 4rem;
}
.w-36 {
  width: 9rem;
}
.justify-between {
  justify-content: space-between;
}
.flex-\[1\] {
  flex: 1;
}
.w-5 {
  width: 1.25rem;
}
.h-5 {
  height: 1.25rem;
}
.w-60 {
  width: 15rem;
}
</style>
